<template>
  <div style="width:100%;background-color:#f3f6fa">
    <div class="title">
      <span class="title-name">业务概况</span>
      <div class="tag-button">
        <el-button type="primary" style="padding:6px 20px" @click="edit" v-if="closureStatus">{{ buttonName }}</el-button>
      </div>
      <div class="title-icon">
        <i class="iconfont iconhelp" @click="preview"></i>
      </div>
    </div>
    <el-row :gutter="22" style="margin:0 30px;">
      <el-col :span="5">
        <div class="cardinfo">
          <div class="imagebox">
            <i class="iconfont iconrenwu" />
          </div>
          <div class="cardword" @click="skipPage(1)">
            <div class="card-padding">
              任务管理&nbsp;&nbsp;
              <!--<span style="color:#F59A23">{{general.taskTotalCounts}}</span>-->
            </div>
            <div class="card-padding">
              已完成&nbsp;&nbsp;
              <span class="sucess-color">{{ general.completeTaskCounts }}</span>
            </div>
            <div class="card-padding">
              未完成&nbsp;&nbsp;
              <span class="no-color">{{ general.noCompleteTaskCounts }}</span>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="cardinfo">
          <div class="imagebox">
            <i class="iconfont iconbuoumaotubiao25" />
          </div>
          <div class="cardword" @click="skipPage(2)">
            <div class="card-padding">收资文件&nbsp;&nbsp;</div>
            <div class="card-padding">
              已收&nbsp;&nbsp;
              <span class="sucess-color">{{ general.pickupFileCounts }}</span>
            </div>
            <div class="card-padding">
              未收&nbsp;&nbsp;
              <span class="no-color">{{ general.noPickupFileCounts }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="cardinfo">
          <div class="imagebox">
            <i class="iconfont iconwendang" />
          </div>
          <div class="cardword" @click="skipPage(3)">
            <div class="card-padding">项目文档</div>
            <div
              class="card-padding sucess-color"
              style="margin-top:20px"
            >{{ general.projectFileCounts }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="cardinfo">
          <div class="imagebox">
            <i class="iconfont iconliucheng" />
          </div>
          <div class="cardword" @click="skipPage(4)">
            <div class="card-padding">成果校审</div>
            <div class="card-padding">
              已办结&nbsp;&nbsp;
              <span class="sucess-color">{{ general.completeWorkflowCounts }}</span>
            </div>
            <div class="card-padding">
              办理中&nbsp;&nbsp;
              <span class="no-color">{{ general.dealWorkflowCounts }}</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="cardinfo">
          <div class="imagebox">
            <i class="iconfont iconicon-p_mrpjinduzhuizong" />
          </div>
          <div class="cardword" @click="skipPage(5)">
            <div class="card-padding">资料归档进度</div>
            <div class="card-padding">
              电子归档&nbsp;&nbsp;
              <span :class="[general.archiveStatus==='0'?'no-color':'sucess-color','card-padding']">{{ general.archiveStatusText }}</span>
            </div>
          <div class="card-padding">
            书面归档&nbsp;&nbsp;
            <span :class="[general.writtenArchiveStatus==='0'?'no-color':'sucess-color','card-padding']">{{ general.writtenArchiveStatusText }}</span>
          </div>
            
          </div>
        </div>
      </el-col>
    </el-row>

    <div
      style="margin:0 40px 10px 40px;background-color:#fff;padding:10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
    >
      <div class="tabletitle">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目名称</div>
              <div class="input-content">
                <el-input v-model="general.projectName" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务名称</div>
              <div class="input-content">
                <el-input v-model="general.name" :disabled="!isEdit" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务编号</div>
              <div class="input-content">
                <el-input v-model="general.sectionNumber" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务类别</div>
              <div class="input-content">
                <el-input v-model="general.menuName" placeholder="请输入" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目负责人</div>
              <div class="input-content">
                <el-input v-model="general.projectLeader" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目经理</div>
              <div class="input-content">
                <el-input v-model="general.projectManager" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">项目成员</div>
              <div class="input-content">
                <el-input v-model="general.projectMember" :disabled="true" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">业务状态</div>
              <div class="input-content">
                <el-select v-model="general.status" :disabled="!isEdit">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  />
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">开始时间</div>
              <div class="input-content">
                <el-date-picker
                  v-model="general.businessStartTime"
                  :disabled="!isEdit"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="input-wrap">
              <div class="input-label">完成时间</div>
              <div class="input-content">
                <el-date-picker
                  v-model="general.businessEndTime"
                  :disabled="!isEdit"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                />
              </div>
            </div>
          </el-col>

          <el-col :span="24">
            <div class="input-wrap">
              <div class="input-label">状态说明</div>
              <div class="input-content">
                <el-input
                  v-model="general.statusRemark"
                  :disabled="!isEdit"
                  type="textarea"
                  rows="4"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { businessGeneral, updateBusiness } from '@/api/business/businessGlance';
import { checkProjectStatus } from "@/api/projectWorkbench/projectGlance";
export default {
  name: "BusinessGeneral",
  data () {
    return {
      //项目结项状态
      closureStatus: false,
      manualPreviewUrl: null,
      openPreview: false,
      statusOptions: [],
      isEdit: false,
      buttonName: '编辑',
      general: {}
    }
  },
  created () {
    checkProjectStatus(this.$route.params.projectId).then(res=>{
      if(res.data){
        this.closureStatus = true;
      }
      
    });
    this.getList()
    this.getDicts('business_status').then(response => {
      this.statusOptions = response.data
    })
  },
mounted(){
    document.title=document.getElementById("businessNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}业务主页/业务概况.xlsx`
      )}&name=${encodeURIComponent("业务概况.xlsx")}`;
    },
    getList () {
      businessGeneral(this.$route.params.id).then(res => {
        if (res.code === 200) {
          this.general = res.data
          if(res.data.archiveStatus === '0' ){
            this.general.archiveStatusText ='未归档';
          }else if(res.data.archiveStatus === '1'){
             this.general.archiveStatusText = '已归档';
          }else{
            this.general.archiveStatusText = '归档中';
          }

           if(res.data.writtenArchiveStatus === '0' ){
            this.general.writtenArchiveStatusText ='未归档';
          }else if(res.data.writtenArchiveStatus === '1'){
             this.general.writtenArchiveStatusText = '已归档';
          }else{
            this.general.writtenArchiveStatusText = '归档中';
          }
          
          this.general.guid = this.$route.params.id;
        }
      })
    },
    edit () {
      if (!this.isEdit) {
        this.buttonName = '保存';
        this.isEdit = !this.isEdit
      } else {
        if (this.general.name.trim() === '' || this.general.name === null) {
          this.msgError("业务名称不能为空！")
          return false
        }
        if (this.general.status === null) {
          this.msgError("业务状态不能为空！")
          return false
        }
        if (this.general.businessStartTime === null) {
          this.msgError("开始服务日期不能为空！")
          return false
        }
        debugger
        this.general.projectId=this.$route.params.projectId;
        updateBusiness(this.general).then(res => {
          if (res.code === 200) {
            this.getList()
            this.msgSuccess(res.msg)
            this.buttonName = '编辑';
            this.isEdit = !this.isEdit
          }
        })
      }
    },
    skipPage(type){
      if(type===1){
        this.$router.push("/businessWorkbench/task/"+this.$route.params.id+"/"+this.$route.params.businessCategoryId+"/"+this.$route.params.projectId);
      }else if(type===2){
        this.$router.push("/businessWorkbench/pickupManage/"+this.$route.params.id+"/"+this.$route.params.businessCategoryId+"/"+this.$route.params.projectId);
      }else if(type===3){
        this.$router.push("/businessWorkbench/projectDoc/"+this.$route.params.id+"/"+this.$route.params.businessCategoryId+"/"+this.$route.params.projectId);
      }else if(type===4){
        this.$router.push("/businessWorkbench/resultsReview/"+this.$route.params.id+"/"+this.$route.params.businessCategoryId+"/"+this.$route.params.projectId);
      }else if(type===5){
        this.$router.push("/businessWorkbench/system/log/index/dataArchive/"+this.$route.params.id+"/"+this.$route.params.businessCategoryId+"/"+this.$route.params.projectId);
      }
      
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  height: 50px;
  width: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  .title-name {
    width: 100px;
    font-size: 14px;
  }
  .tag-button {
    flex: 1;
    text-align: right;
  }
  .title-icon {
    cursor: pointer;
    margin-left: 10px;
    .iconfont {
      font-size: 18px;
    }
  }
}
.el-row {
  .cardinfo {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 0px 0px 20px 0px;
  }
}
.cardinfo {
  background-color: #fff;
  border: 1px solid #e1e3ec;
  border-radius: 2px;
  border-radius: 2px;
  margin: 0px 40px 0px 40px;
  padding: 10px;
  height: 160px;
  display: flex;
  align-items: center;
  .sucess-color {
    color: green;
  }
  .no-color {
    color: red;
  }
  .imagebox {
    max-width: 80px;
    flex: auto;
    display: flex;
    justify-content: center;
  }
  .cardword {
    cursor: pointer;
    flex: 1;
    font-family: Microsoft YaHei;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.75);
    letter-spacing: -0.34px;
    text-align: left;
    .card-padding {
      margin: 15px 0;
    }
  }
}
.tabletitle {
  .input-wrap {
    padding: 8px;
    display: flex;

    .input-label {
      min-width: 1em;
      max-width: 6em;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 8px;
      display: flex;
      margin-top: 9px;
      flex: 0 0 90px;
      font-weight: 600;
      font-size: 14px;
    }

    .input-content {
      -webkit-box-flex: 1;
      flex-grow: 1;
      .el-select {
        width: 100%;
      }
    }
  }
}

.el-image {
  padding: 5px;
  width: 100px;
  height: 100px;
}
/deep/.el-input.is-disabled {
  .el-input__prefix {
    display: none;
  }
  .el-input__suffix {
    display: none;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
  padding-left: 15px;
}
/deep/.el-input.is-disabled .el-input__inner:hover {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  cursor: auto;
}
/deep/.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  color: #fff;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #fff;
  color: #606266;
  resize: none;
  cursor: auto;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  color: #fff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  color: #fff;
}

.cardinfo {
  .iconfont {
    font-size: 60px;
    color: #5a77c8;
  }
}

/deep/.el-col-5 {
  // width: 332px;
  width: 20%;
}

</style>
